<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		
		<script>
			//  canvas   class    webpack   module
			/*
			**`Webpack` 是一个静态资源打包工具。**
			它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。
			输出的文件就是编译好的文件，就可以在浏览器段运行了。
			我们将 `Webpack` 输出的文件叫做 `bundle`。
			
			当你构建一个现代的web应用时，通常需要将多个JavaScript文件、CSS文件和其他资源文件打包成一个或
			多个文件，以提高网站的性能和加载速度。Webpack 是一个现代 JavaScript 应用程序的静态模
			块打包器，它可以将你的代码和依赖项转换为静态资产，例如一个或多个 JavaScript 文件和一个或多个 CSS 文件。
			
			Webpack 是一个功能强大的静态模块打包器，可以处理多种类型的文件，并提供了丰富的配置选项和插件，
			可以帮助你快速构建高性能的现代web应用程序。
			
			1. 模块打包
			将项目中的所有模块（JavaScript、CSS、图片等）当作一个整体，通过依赖关系将它们打包成一个或多个静态资源文件。
			2. 依赖管理
			Webpack可以分析模块之间的依赖关系，根据配置的入口文件找出所有依赖的模块，并将其整合到打包结果中。
			3. 文件转换
			Webpack本身只能处理JavaScript模块，但通过加载器（Loader）的使用，可以将其他类型的文件（如CSS、LESS、图片等）转换为有效的模块，使其能够被打包到最终的结果中。
			4. 代码拆分
			Webpack支持将代码拆分成多个模块，按需加载，实现按需加载和提升应用性能。
			5. 插件系统
			Webpack提供了丰富的插件系统，可以通过插件实现各种功能的扩展，例如压缩代码、自动生成HTML文件等。
			
			
			 一安装node.js
				https://nodejs.p2hp.com/
				安装淘宝镜像
			 npm install -g cnpm --registry=https://registry.npmmirror.com
			 
			 
			 //这将设置npm的registry配置为淘宝镜像。
			 二 初始化项目
			 * npm init
			 * 
			 三 安装webpack
			 * cnpm i  --save-dev webpack
				创建一个  webpack.config.js 文件 作为 webpack的配置文件
				//代码如下
				//node.js的引入方式
				const path = require('path')
				module.exports = {
				  //配置项 写入在这里
				  //入口文件 就是 全局的js文件 其他所有js都在这里
				  entry: path.join(__dirname,'/js/index.js'),
				  //项目打包之后的路径
				  output:{
				      path:__dirname + '/dist',
				      filename:'bundle.js',
					  clean: true, // 自动将上次打包目录资源清空
				  },
				  // 开发模式  production  或者development
				  mode:"development"
				}
				//结束
				
				四 安装 webpack 脚手架 
				cnpm install -D webpack-cli
				在package.json中  添加  
				"scripts": {
				 "build": "webpack --mode=development"
				},
				运行  npm  run  build
				这时候js就打包 放在  dist目录里面的  bundle.js
				1.每次打包清空上一次的文件
				在 webpack.config.js 加入配置
				output: {
					clean: true, // 自动将上次打包目录资源清空
				},
				
				五 打包html
				安装插件  
				cnpm i --save-dev html-webpack-plugin
				在 webpack.config.js 引入 
					const HtmlWebpackPlugin = require('html-webpack-plugin');
				在 webpack.config.js 加入配置
					plugins:[
						new HtmlWebpackPlugin({
							template: path.join(__dirname,'/public/index.html'),
							minify: {  // 压缩html
								collapseWhitespace: true, // 折叠空白区域
								keepClosingSlash: true,  // 保持闭合间隙
								removeComments: true,   // 移除注释
								removeRedundantAttributes: true, // 删除冗余属性
								removeScriptTypeAttributes: true,  // 删除Script脚本类型属性
								removeStyleLinkTypeAttributes: true, // 删除样式链接类型属性
								useShortDoctype: true, // 使用短文档类型
								preserveLineBreaks: true, // 保留换行符
								minifyCSS: true, // 压缩文内css
								minifyJS: true, // 压缩文内js
							  }
						})
					],
					
					可选
				在根目录 public下 新建  index.html
				
				六 图片配置 
					cnpm install  html-withimg-loader -D
					在 webpack.config.js 加入配置
					module: {
						rules: [
							{
								test: /\.css$/, //打包规则应用到以css结尾的文件上
								use: ['style-loader', 'css-loader']
							},
							{
								test: /\.(png|jpg|gif|svg)$/,
								type: 'asset/resource',
								generator: {
									filename: "images/[hash:8][ext][query]",
								}
							},
							{
								test: /\.html$/,
								use: {
									loader: 'html-withimg-loader',
								},
							}
						],
					},

				asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
				asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
				asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
				asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。
				
				
				
				七 使用webpack进行CSS打包
				安装style-loader和 css-loader
				Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
				Loader 可以理解为是模块和资源的转换器。
				首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css
				cnpm install --save-dev style-loader css-loader 
				在 webpack.config.js 加入配置
				module: {
					rules: [  
						{  
							test: /\.css$/,    //打包规则应用到以css结尾的文件上
							use: ['style-loader', 'css-loader']
						}  
					]  
				}
				根目录创建一个css文件夹  
				css里面创建一个 index.css 写入任意样式
				主入口 js/index.js
				import '../css/index.css'
				
				
				加入less     cnpm install --save-dev less less-loader
					修改webpack里面的配置
					test: /(\.css|\.less)$/, //打包规则应用到以css结尾的文件上
					use: ['style-loader', 'css-loader','less-loader']
				
				八 webpack-dev-server
				 是一个本地开发服务器，会自动监听变化，自动打包构建，自动更新刷新浏览器
				特点： 
				 不会产生dist文件，将打包结果暂时存在内存中，内部的http-sever访问这些文件并读取数据，发送给浏览器
				减少磁盘的读取，提高构建效率
				写法：在webpack.config.js文件中，通过属性devServer: { } 设置与 webpack-dev-server相关的配置
				
				1 安装
				cnpm i webpack-dev-server
				配置package.json
				"scripts": {
				  "start": "webpack-dev-server",
				},
				配置webpack.config.js
				devServer:{
				    port:3000,//开打项目的端口
					open:true, //是否自动打开网页
				    hot:true // 开启热更新HMR，只能跟新css。js和图片需要手动更新
				},
				
				八. js压缩 
				cnpm i --save-dev uglifyjs-webpack-plugin
				const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
				plugins: [
					new UglifyJsPlugin({
						extractComments: false //启用/禁用提取注释。	
					})
				]
				
				
				webpack 配置项目
				1.entry：入口文件，指定应用程序的起始点。
				2.output：输出文件，指定打包后的文件名和路径。
				3.module：模块配置，用于指定不同类型的文件如何处理。包括各种加载器、解析器等配置。
				4.resolve：解析配置，用于指定模块如何被解析。包括别名、扩展名、模块路径等配置。
				5.devServer：开发服务器配置，用于指定如何启动和配置开发服务器。包括端口号、代理、热模块替换等配置。
				6.mode：模式配置，用于指定Webpack的工作模式。包括开发模式（development）和生产模式（production）。
				7.加载器（Loaders）：Webpack 使用加载器来处理各种类型的文件。加载器可以将文件转换为模块，也可以在转换过程中执行其他任务，例如代码检查、自动添加浏览器前缀等。Webpack 本身只能处理 JavaScript 模块，但是通过使用不同类型的加载器，可以处理各种类型的文件。
				8.插件（Plugins）：插件是一个可以在Webpack构建过程中扩展其功能的 JavaScript对象。Webpack 的很多功能都是通过插件实现的，例如代码压缩、代码分离、代码分析、资源管理等。开发者可以根据自己的需要编写自定义插件，或者使用现成的插件来扩展Webpack的功能。
				9.打包优化（Optimization）：Webpack 提供了多种打包优化的选项，包括代码分离、压缩、懒加载、缓存等。开发者可以通过配置这些选项来提高应用程序的性能和加载速度。
				10.开发模式和生产模式：Webpack 可以通过不同的配置选项来支持开发模式和生产模式。在开发模式下，Webpack 会生成更快的构建结果，并提供更好的开发体验；在生产模式下，Webpack 会生成更小、更快的代码，以便于部署和发布。
				11.HMR（Hot Module Replacement）：Webpack 支持热模块替换，即在应用程序运行时，可以动态更新模块的代码，而不需要重新加载整个页面。这可以大大提高开发效率和体验。
		</script>
	</body>
</html>
